<template>
	<view class="pages">
		<Loading class="loading-box" v-show="!isLoading" :isStatus='loadStatus'></Loading>
		<cu-custom bgColor="uerHead1" :isBack="true" textRight="false" type="1">
			<block slot="backText" class="titilestyle">{{title}}</block>
		
		</cu-custom>
		<view class="postList fade-in" v-if="isshowPost" :style="{height:swiperHeight+'px'}">
			<view class="post-content">
				<view class="head-post flex align-center bg-white ">
					<text class="padding text-bold text-xl">在招职位({{postData.length}})</text>
				</view>
				<scroll-view scroll-y="true" class="scroll-box">
					<PostList @clickItem="jumpTo" :postData='postData'></PostList>
				</scroll-view>
			</view>
		
		
		
			<view class="mask" @click="ishowPost">
		
			</view>
		
		
		</view>
		
		
		<scroll-view scroll-y="true" :style="{height:swiperHeight+'px'}">
		
			<view class="inro-card">
				<view class="flex  s-item-head   ">
					<view class="cu-avatar radius lg bg-brown" :style="{backgroundImage:'url('+isNull(info.logo)+')'}" style="border-radius: 25rpx;">

					</view>
					<view class="item-bottom  flex flex-direction  justify-around">

						<view class=" text-bold">{{info.name}}</view>
						<view class="flex text-gray flex-wrap margin-top-sm">
							<view class=" text-over ">{{info.industry}}</view>
							<view class=" nav">
								{{info.min_scale}}-{{info.max_scale}} 人
							</view>
						</view>

					</view>
				</view>

			</view>
			<!-- 介绍图 -->
			<!-- <swiper class="card-swiper" :class="dotStyle?'square-dot':'round-dot'" :indicator-dots="true" :circular="true"
			:autoplay="true" interval="5000" duration="500" @change="cardSwiper" indicator-color="#8799a3"
			indicator-active-color="#0081ff">
			<swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
				<view class="swiper-item">
					<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
					<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false"
						objectFit="cover" v-if="item.type=='video'"></video>
				</view>
			</swiper-item>
		</swiper> -->

			<view class="inro-card">
				<text class="text-blod padding-sm">公司介绍</text>
				<view class=" padding-sm ">
					<wxParse :content="info.desc"></wxParse>
				</view>


			</view>


			<view class="inro-card">
				<text class="text-blod padding-sm">公司地址</text>
				<view class="padding-sm text-gray">
					<text class="cuIcon-location"></text>{{info.address}}

				</view>
			</view>

			<view class="inro-card" @click="ishowPost">
				<text class="text-blod padding-sm">在招职位（{{postData.length}}）</text>
				<text class="cuIcon-right text-right right "></text>

			</view>
			
	

		</scroll-view>



	</view>
</template>

<script>
	import PostList from "../../components/postList.vue"
	import wxParse from "@/components/gaoyia-parse/parse.vue"
	export default {
		components: {
			PostList,
			wxParse
		},
		data() {
			return {
				title: "企业详情",
				cardCur: 0,
				dotStyle: false,
				towerStart: 0,
				direction: '',
				swiperList: [{
					id: 0,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84000.jpg'
				}, {
					id: 1,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big37006.jpg',
				}, {
					id: 2,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big39000.jpg'
				}],
				animationData: {},
				animation: null,
				deviceH: this.WH,
				isshowPost: false,
				info: {},
				isLoading: false, //是否加载完成显示
				loadStatus: 'load',
				defalutLogo: "../../static/enter.png",
				swiperHeight:0,
				postData:{},
				company_id:"",
				



			}
		},
		onLoad(option) {
			this.company_id=option.company_id;
			this.getDeatal(option.company_id);
		},
		mounted() {
			this.animation = uni.createAnimation({
				duration: 1000,
				timingFunction: 'ease'
			});
	
			this.getInfo().then((e) => {
				this.swiperHeight = e.screenHeight - (e.custom.top);
			});

		},
		methods: {
			isNull(param) {
				return param ? param : this.defalutLogo;
			},
			getDeatal(company_id) {
				this.apiRequest('/buyer/OfferCompanyInfo', {
					company_id: company_id
				}, "get", 0).then(res => {
					console.log(res);
					if (res.code == 200) {
						this.info = res.data;
						this.isLoading = true;
						this.getPOst();
					} else this.error();


				}).catch(() => {
					this.error();
				})


			},
			error() {
				uni.showModal({
					title: "温馨提示",
					content: "查找的信息不存在",
					showCancel: false,
					success: (e) => {
						uni.navigateBack({
							delta: 1
						})
					}
				})
			},
			cardSwiper(e) {
				this.cardCur = e.detail.current
			},
			ishowPost() {
				(this.isshowPost) ? (() => {
					this.isshowPost = false;
				})() : (() => {
					
					this.isshowPost = true;
				})();
			},
			/**
			 * 获取再招职位
			 */
			getPOst(){
				this.apiRequest('/buyer/OfferCompanyOffer', {
					company_id:this.company_id
				}, "get", 0).then(res => {
					console.log(res);
					if (res.code == 200) {
						this.postData=res.data.list;
					
					} else this.error();
				}).catch(() => {
					this.error();
				})
				
			},
			
			/**
			 * 关闭动画
			 */
			closeShowAimation() {
				this.animation.bottom(-this.deviceH).step({
					duration: 200
				});
				this.animationData = this.animation.export();
			},
			/**
			 * 显示动画
			 */
			showAimation() {
				this.animation.bottom(0).step({
					duration: 500
				});
				this.animationData = this.animation.export();
				setTimeout(() => {
					this.isShowComment = true;
				}, 500)

			}
		}

	}
</script>

<style scoped>
	scroll-view{
		padding-bottom: 60px;
	}
	.pages{
		overflow-y: hidden;
	}
	/**
	 * 卡片样式
	 */
	.inro-card {
		width: 92%;
		margin: 20upx auto;
		background: #FFFFFF;
		box-shadow: 0px 0px 10upx 0px rgba(0, 0, 0, 0.05);
		border-radius: 20upx;
		padding: 30upx;
		position: relative;
	}

	.info-card-head {
		width: fit-content;
		font-size: 32upx;
		font-weight: 800;
		color: #333333;
		position: relative;
		z-index: 2;
	}

	.info-head-mask {
		position: absolute;
		width: 80upx;
		height: 30upx;
		background: #DEEEFF;
		border-radius: 15px;
		bottom: -5upx;
		z-index: -1;
		right: -20upx;

	}

	.info-card-head1 {

		z-index: 2;
		position: relative;
	}

	.info-card-desc {
		margin-top: 10upx;
		width: 100%;
		display: flex;
		flex-direction: column;

	}

	.right {
		position: absolute;
		float: right;
		right: 15rpx;
	}


	/**
	 * 职位列表
	 */
	.postList {
		width: 100vw;
		position: absolute;
		z-index: 99;
		top: 0;

	}

	.postList .mask {
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}

	.post-content {
		width: 100vw;
		position: absolute;
		height: 80vh;
		bottom: 0;

	}

	.head-post {
		height: 100rpx;
		border-top-right-radius: 20rpx;
		border-top-left-radius: 20rpx;
	}

	.scroll-box {
		width: 100%;
		height: 100%;
		background-color: #F2F2F2;
	}
	
	
</style>
<style lang="scss">
	.item-bottom {
		margin-left: 20rpx;
		overflow: hidden;
		width: 750*0.92-80-96rpx;
	}
</style>
